<template>
	<div class="collaborativeApprovalManagementPage">
		<div class="search-wrap d-flex" style="flex-wrap: wrap">
			<div class="search-input-box">
				<span>搜索</span>
				<el-input
					v-model="form.keywords"
					placeholder="根据审批单文件标题或审批单编号"
				></el-input>
			</div>
			<div class="search-input-box m-l10">
				<span class="m-r10">审批状态</span>
				<el-select v-model="form.status" clearable>
					<el-option
						v-for="(item, index) in approvalStatus"
						:key="index"
						:label="item.label"
						:value="item.value"
					></el-option>
				</el-select>
			</div>
			<div class="search-input-box m-l10">
				<span class="m-r10">审批单类别</span>
				<el-select v-model="form.type" clearable>
					<el-option
						v-for="(item, index) in approvalFormCategory"
						:key="index"
						:label="item.label"
						:value="item.value"
					></el-option>
				</el-select>
			</div>
			<div class="search-input-box m-l10">
				<span class="m-r10">审批单创建时间范围</span>
				<el-date-picker
					v-model="form.timeArr"
					@change="timeChange"
					size="large"
					type="daterange"
					value-format="YYYY-MM-DD"
					range-separator="-"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
				/>
			</div>
			<div class="buttons-wrap d-flex m-l30">
				<el-button color="#FC7018" style="color: #ffffff" @click="onQuery"
					>查询</el-button
				>
				<el-button color="#F0F0F0" style="color: #1a1a1a" @click="onReset"
					>重置</el-button
				>
			</div>
		</div>

		<public-table
			class="m-t20"
			index
			:page="page"
			:tableData="tableData"
			:tableOption.sync="tableOption"
			@page-change="onPageChange"
		>
			<template #buttons="scope">
				<el-button
					class="button_view"
					@click="handleToPath(scope.row)"
					size="small"
					>查看详情</el-button
				>
			</template>
		</public-table>
	</div>
</template>

<script setup>
import { collaborativeApprovalApi } from "@/api/biddingProject";
import { ElInput, ElSelect, ElOption, ElDatePicker } from "element-plus";
import {
	approvalStatus,
	approvalFormCategory,
} from "@/common/dict/dictCollect";
import PublicTable from "@/components/PublicTable";
import { onMounted, reactive, ref } from "vue";
import { resetForm } from "@/common/utils/GlobalUtils";
import { useRouter, useRoute } from "vue-router";
import { getURLhandler } from "@/views/constructionProjectManage/static/utools.js";

const router = useRouter();
const route = useRoute();
const statusType = getURLhandler(route.path).statusType;
const page = reactive({
	total: 0,
	current: 1,
	size: 50,
});

const tableData = ref([]);

const tableOption = ref([
	{
		label: "状态 ",
		prop: "status",
		formatter: (val, row) => {
			let arr = ["", "审核中", "审核成功", "审核驳回"];
			return arr[val];
    },
    minWidth: 80
	},
	{ label: "审批单标题 ", prop: "title", minWidth: 100 },
	{ label: "审批单编号 ", prop: "businessId", minWidth: 100 },
	{
		label: "审批类型 ",
		prop: "type",
		formatter: (val, row) => {
			let str = "";
			switch (val) {
				case 11:
					str = "比选会审";
					break;
				case 12:
					str = "中标登记会审";
					break;
				case 13:
					str = "中标合同会审";
					break;
				default:
					str = "-";
					break;
			}
			return str;
    },
    minWidth: 80
	},
	{ label: "发起者 ", prop: "userName", minWidth: 80 },
	{ label: "审批单创建时间 ", prop: "applyTime", minWidth: 130 },
	{ label: "审批单完成时间", prop: "approvalTime", minWidth: 130 },
	{ label: "关联项目", prop: "projectMainName", minWidth: 80 },
	{ label: "关联招标任务 ", prop: "projectTaskName", minWidth: 130 },
	{
		label: "操作",
		slot: true,
		width: 200,
		overHidden: false,
		slotName: "buttons",
	},
]);

const form = reactive({
	keywords: "",
	status: "",
	type: "",
	startTime: "",
	endTime: "",
	timeArr: "",
});

const timeChange = (e) => {
	if (e === null) {
		form.startTime = "";
		form.endTime = "";
		return;
	}
	form.startTime = e[0];
	form.endTime = e[1];
};

const onQuery = () => {
	page.current = 1;
	page.size = 50;
	let param = {
		param: {
			...form,
		},
		pageNum: page.current,
		pageSize: page.size,
	};
	getTenderTaskApprovalPageList(param);
};

const onReset = () => {
	resetForm(form);
	page.current = 1;
	page.size = 50;
	getTenderTaskApprovalPageList({
		pageNum: 1,
		pageSize: 50,
	});
};

const onPageChange = (e) => {
	page.current = e.page;
	page.size = e.limit;
	let param = {
		param: {
			...form,
		},
		pageNum: page.current,
		pageSize: page.size,
	};
	getTenderTaskApprovalPageList(param);
};

const getTenderTaskApprovalPageList = (param) => {
	collaborativeApprovalApi.getTenderTaskApprovalPageList(param).then((res) => {
		tableData.value = res.data.content;
		page.total = res.data.totalSize;
	});
};

const handleToPath = (row) => {
	// console.log(row);
	switch (row.type) {
		case 11:
			// str = '比选会审';
			router.push({
				path: `/tender/collaborativeApprovalManagement/tenderDetails/tenderTaskId=${
					row.tenderTaskId
				}&pageType=${"view"}&businessId=${row.businessId}`,
			});
			break;
		case 12:
			// str = '中标结果登记会审';
			router.push({
				path: `/tender/collaborativeApprovalManagement/tenderRegisterDetails/tenderTaskId=${
					row.tenderTaskId
				}&pageType=${"view"}&businessId=${row.businessId}`,
			});
			break;
		case 13:
			// str = '中标合同会审';
			router.push({
				path: `/tender/collaborativeApprovalManagement/tenderContractDetails/tenderTaskId=${
					row.tenderTaskId
				}&pageType=${"view"}&businessId=${row.businessId}`,
			});
			break;
	}
};

onMounted(() => {
	form.status = statusType || "";
	getTenderTaskApprovalPageList({
		pageNum: 1,
		pageSize: 50,
		param: {
			status: form.status,
		},
	});
});
</script>

<style lang="scss" scoped>
.collaborativeApprovalManagementPage {
	.search-wrap {
		.search-input-box {
			span {
				font-size: 14px;
				font-weight: 500;
				color: #1a1a1a;
			}
			.el-input {
				width: 220px;
				margin-left: 8px;
			}
			.el-select {
				width: 200px;
			}
		}
	}
	.m-l10 {
		margin-bottom: 20px;
	}

	:deep(.el-date-editor) {
		width: 200px;
	}
}
</style>
